<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="m/head :: head"></div>
</head>

<body>

<div th:replace="m/head :: body('banner.hidden', 'head-with-menu', '作品详情')"></div>

<!--主体内容-->
<div class="director-content works-content">

    <div class="director-top works-top" style="padding: 0;">
        <video id="detail-player" width="100%" height="100%" preload="auto" playsinline webkit-playinline x5-playinline></video>
    </div>
    <div class="works-order-icon clearfix">
        <div class="left-btn">
            <a th:href="@{'/order/ready/1?sameStyleId=' + ${video.id}}" target="_blank">订购同款</a>
        </div>
        <div class="works-icon">
            <dl>
                <dt>
                    <i class="iconfont icon-shipin"></i>
                </dt>
                <dd th:text="${video.count}"></dd>
            </dl>
            <dl th:class="${collect ne null ? 'on' : ''}">
                <dt class="operations-collect" th:attr="data-collect-id=${video.id}" data-collect-type="2" data-collect-operation="2">
                    <i class="iconfont icon-zanxinxingguanzhu"></i>
                </dt>
                <dd th:text="${video.collectCount}"></dd>
            </dl>
            <dl th:class="${like ne null ? 'on' : ''}">
                <dt class="operations-collect" th:attr="data-collect-id=${video.id}" data-collect-type="2" data-collect-operation="1">
                    <i class="iconfont icon-dianzan"></i>
                </dt>
                <dd th:text="${video.likeCount}"></dd>
            </dl>
            <dl>
                <dt>
                    <i class="iconfont icon-fenxiang"></i>
                </dt>
                <dd>
                    <a class="" href="javascript:;" target="_blank" title="分享" id="share-btn">
                        分享
                        <div class="smgz-pic smgz-pic-bdfx" style="display: none;">
                            <div class="bdsharebuttonbox">
                                <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                                <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ"></a>
                                <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                                <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                            </div>
                            <script th:inline="none">
                                window._bd_share_config = {"common": {"bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "16"}, "share": {}};
                                with (document)0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
                            </script>
                        </div>
                    </a>
                </dd>
            </dl>
        </div>
    </div>
    <div class="director-introduction">
        <p th:text="${'导演：' + video.photoGrapherUser.nickname}"></p>
        <p th:text="${'编剧：' + video.scriptWriterUser.nickname}"></p>
        <p cus:dict="video-type,${video.type},作品类型："></p>
        <p th:text="${'简介：' + video.description}"></p>
    </div>

    <div class="director-comment director-works">
        <div class="top clearfix">
            <div class="left">
                <h3>作品评论（[[${evaluatesPage.total}]]条）</h3>
            </div>
            <div class="right">
                <a th:if="${evaluatesPage.total > 5}" href="javascript:void(0)">查看全部</a>
            </div>
        </div>
        <div class="comment-list">
            <ul>
                <li th:each="item:${evaluatesPage.list}">
                    <div class="list-top clearfix">
                        <div class="left">
                            <img th:if="${item.evaluateUser.portrait ne null and item.anonymous ne 1}" th:src="${#request.getAttribute('uploadServer') + item.evaluateUser.portrait}">
                            <img th:if="${item.evaluateUser.portrait eq null || item.anonymous == 1}" th:src="${#request.getAttribute('ctx') + '/static/front/img/user.png'}">
                            <span th:text="${item.anonymous == 1 ? '匿名用户' : item.evaluateUser.nickname}"></span>
                            <div class="star">
                                <i cus:star="i,iconfont icon-star,iconfont icon-iconfontxingxing,${item.score},5"></i>
                            </div>
                            <span style="color: rgb(160,160,160);" th:text="${item.score}"></span>
                        </div>
                        <div class="right" th:text="${#dates.format(item.createDate, 'yyyy-MM-dd')}">

                        </div>
                    </div>
                    <div class="list-middle">
                        <a href="javascript:void(0)" th:each="titem:${item.tagsArray}" cus:dict="evaluate-production-tags,${titem}"></a>
                    </div>
                    <div class="list-bottom">
                        <p th:text="${'评论：' + item.comment}"></p>
                        <div class="admin-reply" th:if="${item.reply ne null}">
                            <p th:text="${'管理员回复：' + item.reply}"></p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<div th:replace="m/foot :: foot"></div>

</body>

<div th:replace="m/foot :: footer('')"></div>
<script type="text/javascript" th:src="@{/static/m/js/operations.js}"></script>

<!-- tencent cloud production -->
<link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
<script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js"></script>

<script type="text/javascript" th:inline="javascript">
    TouchSlide({
        slideCell: "#focus",
        titCell: ".hd li",
        mainCell: ".bd ul",
        effect: "left",
        autoPlay: true,
        interTime: 5000
    });

    $(function () {
        var $videoBox = $('#detail-player');
        TCPlayer('detail-player', {
            fileID: [[${video.url}]],
            appID: [[${video.appId}]],
            width: $videoBox.width(),
            height: $videoBox.height(),
            definition: 30,
            t: [[${video.t}]],
            sign: [[${video.sign}]],
            options: {
                playbackRates: {}
            },
            plugins: {
                ContinuePlay: { // 开启续播功能
                    // auto: true, //[可选] 是否在视频播放后自动续播
                    // text:'上次播放至 ', //[可选] 提示文案
                    // btnText: '恢复播放' //[可选] 按钮文案
                }
            }
        });
        playCount([[${video.id}]]);

        // 如果视频加载失败, 更新缓存
        setInterval(function () {
            if ($('.vjs-errors-dialog').length > 0) {
                $.get('/production/api/refresh?videoId=' + [[${video.id}]], function () {
                    window.location.reload();
                })
            }
        }, 1000);

        $('#share-btn').click(function () {
            if ($('.smgz-pic').is(':visible')) {
                $('.smgz-pic').hide();
            } else {
                $('.smgz-pic').show();
            }
        })
    })
</script>
</html>

